
<template>
  <div class="search-container">
    <!--添加动画效果-->
    <transition name="slide-fade">
      <div v-show="isSearching">
        <el-input
            v-model="searchQuery"
            placeholder="请输入搜索内容"
            ref="searchInput"
            @input="handleInput"
            @blur="handleBlur"
            class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <!-- 显示匹配的菜单项 -->
        <ul v-if="searchQuery && filteredMenu.length > 0" class="menu-list">
          <li v-for="item in filteredMenu" :key="item.index" @click="handleTabClick(item)" class="menu-item">
            <el-icon><component :is="item.icon" /></el-icon>
            {{ item.title }}
          </li>
        </ul>
      </div>
    </transition>
    <!-- 搜索图标 -->
    <div>
      <el-icon v-show="!isSearching" class="search-icon" @click="toggleSearch"><Search /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElInput, ElIcon } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { mockMenu } from "../../../mock/menu";
import router from "../../router";

const isSearching = ref(false);
const searchQuery = ref('');
const searchInput = ref(null);

//切换搜索框
const toggleSearch = () => {
  isSearching.value = !isSearching.value;
  if (isSearching.value) {
    //获取焦点
    searchInput.value.focus();
  }
};

//失去焦点
const handleBlur = () => {
  console.log("失去焦点：" + searchQuery.value)
  if (!searchQuery.value) {
    isSearching.value = false;
  }
};

//搜索菜单
const filteredMenu = computed(() => {
  const query = searchQuery.value.toLowerCase();
  return mockMenu.filter(item => {
    if (item.title.toLowerCase().includes(query)) {
      return true;
    }
    if (item.children) {
      return item.children.some(child => child.title.toLowerCase().includes(query));
    }
    return false;
  }).flatMap(item => {
    if (item.children) {
      return item.children.filter(child => child.title.toLowerCase().includes(query));
    }
    return [item];
  });
});

const handleInput = () => {
  // 可以在这里添加额外的处理逻辑
};

const handleTabClick =(item) =>{
  console.log("点击：" + JSON.stringify(item))
  searchQuery.value = '';
  isSearching.value = false;
  router.push(item.index);
}

</script>

<style scoped>
.search-container {
  /*
  margin-left: 10px;
  */
  position: relative;
  display: flex;
  line-height: 40px;
}

.search-input {
  width: 200px;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-100%); /* 从左侧滑入，向右侧滑出 */
  opacity: 0;
}

.search-icon {
  cursor: pointer;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.menu-item:hover {
  background: #f0f0f0;
}
</style>